<html>
<head>

  <script src="__STATIC__/js/jquery-1.11.3.min.js"></script>
  <script src="__STATIC__/layer/layer.js"></script>
  <script src="__STATIC__/js/Validform_v5.3.2_min.js"></script>
  <script src="__STATIC__/js/Validform_Datatype.js"></script>
  <script>
    $(function () {

      var h = $(window).height();

      $(".board").css({height: h + "px"});
    })
  </script>

  <style>
    .first .form-control {  font-size: 12px;  width: 120px;  height: 24px;  line-height: 24px;  background-color: #fff;
      border: 1px solid #ccc;  outline: none;  color: #333;  display: block;  }
    .first textarea {  width: 242px;  height: 24px;  font-size: 12px;  line-height: 20px;  resize: none;
      border: 1px solid #CECECE;  outline: none;  background: #ffffff;  color: #333;  text-indent: 10px;  }
    .first textarea::-webkit-input-placeholder {  font-family: '微软雅黑';  }
    .first > div .text {  font-size: 12px;  width: 242px;  height: 24px;  line-height: 24px;  background-color: #fff;
      border: 1px solid #ccc;  outline: none;  color: #333;  text-indent: 10px;  }
    .info {  width: 100%;  background: white;  }
    .info .title {  background: #F3F3F3;  font-size: 12px;  line-height: 32px;  color: #666666;  padding-left: 20px;  }
    .info .title span {
      color: #E03025;
    }

    .tabcon {
      width: 650px;
      margin: 30px auto;
    }

    .left_title {
      width: 80px;
      padding-left: 20px;
      float: left;
      position: relative;
      font-size: 12px;
      line-height: 24px;
    }

    .must::before {
      position: absolute;
      content: '*';
      left: 7px;
      top: 3px;
      font-size: 20px;
      color: #E03025;
    }

    .first > div {
      margin-top: 12px;
      overflow: hidden;
    }

    .main {
      float: left;
    }

    .form-control_num {
      width: 90px !important;
      margin-bottom: 0;
      margin-right: 10px;
    }

    .pri {
      margin-left: 100px;
      margin-top: 20px;
    }

    .pri .checkbox + label {
      -webkit-appearance: none;
      background: url("assets/img/before.jpg") no-repeat center left;
      background-size: 16px 16px;
      padding-left: 25px;
      color: #363636;
      font-size: 12px;
    }

    /*.pri .checkbox {*/
      /*display: none;*/
    /*}*/

    .pri .checkbox:checked + label {
      background: url("/assets/img/after.jpg") no-repeat center left;
    }

    .submit {
      width: 114px;
      height: 25px;
      line-height: 25px;
      background: #E03025;
      color: white;
      border-radius: 4px;
      text-align: center;
      border: none;
      outline: none;
      margin-left: 100px;
    }
  </style>
</head>
<div class="info">
  <div class="title"><span>新增收货地址 　</span>电话号码、手机号选填一项, 其余均为必填项</div>
  <div class="tabcon">
    <div class="cur">
      <form action="{:url('shop/Member/set_address')}" method="post" id="address">
        <div class="first">
          <div>
            <div class="left_title must">所在地区</div>
            <div class="main">
              <form role="form">
                <div class="form-group" style="float: left;">
                  <select class="form-control" id="one_area" onchange="change_area()">
                    {volist name='area' id='item'}
                    <option value="{$item.area_id}">{$item.area_name}</option>
                    {/volist}
                  </select>
                </div>
              </form>
              <font id="two_level"></font>
              <font id="three_level"></font>
              <input type="hidden" id="selected" name="area_info1"/>
              <input type="hidden" id="selected1" name="area_info2"/>
              <input type="hidden" id="selected2" name="area_info3"/>
            </div>
          </div>
          <div>
            <div class="left_title must">详细地址</div>
            <div class="main">
              <textarea style="width:350px;height:50px;" maxlength="40" placeholder="建议您写一下详细地址～" name="address" datatype="*" nullmsg="详细地址不能为空！"></textarea>
            </div>
          </div>
          <div>
            <div class="left_title must">收货人</div>
            <div class="main">
              <input type="text" class="text" placeholder="请输入收货人姓名" name="name" datatype="hanzi"
                     errormsg="请输入正确格式的姓名！" nullmsg="收货人不能为空">
            </div>
          </div>
          <div>
            <div class="left_title must">手机号码</div>
            <div class="main">
              <form role="form" style="float: left;margin-bottom: 0;">
                <div class="form-group"><select class="form-control form-control_num">
                  <option>中国大陆</option>
                </select></div>
              </form>
              <input type="text" class="text" placeholder="请填写手机号" name="phone" datatype="m11"
                     errormsg="手机号格式错误">
            </div>
          </div>
          <div class="pri">
            <input type="checkbox" id="radio-2" name="status" class="checkbox" value="1"/>
            <label for="radio-2"> 设置为默认收货地址 </label>
          </div>
          <br> <input type="submit" value="保存收货人信息" class="submit" id="sub_address"></div>
      </form>
    </div>
  </div>
</div>
<script>
  //获取窗口索引
  var index = parent.layer.getFrameIndex(window.name);
  // 地区三级联动
  function change_area() {
    var one = $('#one_area').val();
    $.post("{:url('shop/Area/set_area')}", {'id': one}, function (t) {
      var html = '<form role="form" id="form" style="float: left;"><div class="form-group" style="float: left;"><select id="two_area" onchange="change_there_area()" class="form-control">';
      for (var i = 0; i < t.length; i++) {
        html += '<option value="' + t[i].area_id + '">' + t[i].area_name + '</option>';
      }
      $('#two_level').html(html + '</select></div></form>');
      change_there_area();
    });
    // 获取选中的option 的 text值
    var item = document.getElementById("one_area");
    var text = item.options[item.selectedIndex].text;
    $("#selected").val(text);
  }
  function change_there_area() {
    var two = $('#two_area').val();
    $.post("{:url('shop/Area/set_area')}", {'id': two}, function (t) {
      var html = '<form role="form" id="form" style="float: left;"><div class="form-group" style="float: left;"><select name="area_id" class="form-control" onchange="set_zhi(this.options[this.selectedIndex].text)">';
      for (var i = 0; i < t.length; i++) {
        if (i == 0) {
          set_zhi(t[i].area_name)
        }
        ;
        html += '<option value="' + t[i].area_id + '">' + t[i].area_name + '</option>';
      }
      $('#three_level').html(html + '</select></div></form>');
    });
    // 获取选中的option 的 text值
    var item = document.getElementById("two_area");
    var text = item.options[item.selectedIndex].text;
    $("#selected1").val(text);
  }
  function set_zhi(zhi) {
    $('#selected2').val(zhi);
  }
  // 提交地址
  $(function () {
    // 表单验证
    $.Tipmsg.r = null;
    $.Tipmsg.p = null;
    $.Datatype.m11 = /^1(3|4|5|7|8)\d{9}$/;
    $.Datatype.hanzi = /^\s*[\u4e00-\u9fa5]{2,5}\s*$/;
    var address = $('#address').Validform({
      tiptype: function (msg) {
        layer.msg(msg, {icon: 2});
      },
      btnSubmit: '#sub_address',
      tipSweep: true,
      // 个人信息提交
      ajaxPost: true,
      callback: function (t) {
        if (t.code == 200) {
          layer.msg('修改成功', {icon: 1});
          parent.location.reload();
          parent.layer.close(index);
        } else {
          layer.msg('网络繁忙稍后再试', {icon: 2});
        }
      }
    });
    address.config({
      url: "{:url('shop/member/set_address')}"
    });
    change_area();
    change_there_area();
  });
</script>
<html>